<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HBase Management</title>
<link rel="stylesheet" href="css/templatemo_main.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/templatemo_script.js"></script>
<script type="text/javascript">
	function listtable() {
		$
				.post(
						"listtable.do",
						{},
						function(data) {
							var html = "<h4 class='margin-bottom-15'>HBase Tables</h4>"
									+ "<table class='table table-striped table-hover table-bordered'>"
									+ "<thead>"
									+ "<tr>"
									+ "<th>TableName</th>"
									+ "<th>MaxFileSize</th>"
									+ "<th>MemstoreFlushSize</th>"
									+ "<th>IsReadOnly</th>"
									+ "<th>IsDeferredLogFlush</th>"
									+ "<th>Family</th>"
									+ "<th>Action</th>"
									+ "</tr>" + "</thead>" + "<tbody>";
							$
									.each(
											data,
											function(key, value) {
												html = html
														+ "<tr>"
														+ "<td>"
														+ value.tableName
														+ "</td>"
														+ "<td>"
														+ value.maxFileSize
														+ "</td>"
														+ "<td>"
														+ value.memstoreFlushSize
														+ "</td>"
														+ "<td>"
														+ value.readOnly
														+ ""
														+ "</td>"
														+ "<td>"
														+ value.deferredLogFlush
														+ "" + "</td>" + "<td>";
												var f = "";
												$
														.each(
																value.familyMap,
																function(key,
																		value) {
																	f = f
																			+ "{NAME => '"
																			+ key
																			+ "', COMPRESSION => '"
																			+ value.compression
																			+ "', VERSIONS => '"
																			+ value.maxVersions
																			+ "', COMPRESSION_COMPACT => '"
																			+ value.compactionCompression
																			+ "', TIMETOLIVE => '"
																			+ value.timeToLive
																			+ "', BLOOMTYPE => '"
																			+ value.bloomType
																			+ "', INMEMORY => '"
																			+ value.inMemory
																			+ "', BLOCKSIZE => '"
																			+ value.blockSize
																			+ "'}";
																});
												html = html + f;
												html = html
														+ "</td>"
														+ "<td>"
														+ "<div class='btn-group pull-right' id='templatemo_sort_btn'>"
														+ "<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'>"
														+ "Action</button>"
														+ "<ul class='dropdown-menu' role='menu'>"
														+ "<li><a href='#' onclick='dodel(\""
														+ value.tableName
														+ "\")'>Delete</a></li>"
														+ "</ul>" + "</div>"
														+ "</td>" + "</tr>";
											});
							html = html + "</tbody>" + "</table>";
							$("#hbase-center").html(html);
						}, "json");
	}

	function dodel(tablename) {
		$('.modal').modal('show');
		$('#myModalLabel').html("Are you sure?");
		$("#btn-yes").attr('onclick', "deal(\"" + tablename + "\")");
	}

	function deal(tablename) {
		$.ajax({
			url : 'droptable.do',
			type : 'POST',
			data : {
				tn : tablename
			},
			dataType : 'text',
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				alert(XMLHttpRequest.status);
				alert(XMLHttpRequest.readyState);
				alert(textStatus);
			},
			success : function(result) {
				if (result == "true") {
					$('.modal').modal('hide');
					listtable();
				} else {
					$('#myModalLabel').html(
							"Are you sure? "
									+ "<font style='color:red;'>Delete table ["
									+ tablename + "] failure!</font>");
				}
			}
		});
	}

	function signout() {
		$('#myModalLabel').html("Are you sure?");
		$("#btn-yes").attr('href', 'sign_in.jsp');
		$('.modal').modal('show');
	}

	function createtable() {
		var html = "<b>Create HBase Table</b><br><br>"
				+ "<form role='form' id='templatemo-preferences-form' method='post' action='createtable.do'>"
				+ "<div class='row'>"
				+ "<div class='col-md-6 margin-bottom-15'>"
				+ "<label for='firstName' class='control-label'>Table Name</label> <input type='text' class='form-control' id='tablename' name='tablename' value='Please input hbase table bame' >"
				+ "</div>"
				+ "<div class='col-md-6 margin-bottom-15'>"
				+ "<label for='lastName' class='control-label'>Family Name</label>"
				+ "<input type='text' class='form-control' id='familyname' name='familyname' value='Please input hbase family bame, example : family1,family2' >"
				+ "</div>"
				+ "</div>"
				+ "<div class='row'>"
				+ "<div class='col-md-6 margin-bottom-15'>"
				+ "<label>Max File Size(Region Size)</label>"
				+ "<input type='text' class='form-control' id='maxfilesize' name='maxfilesize' value='Please input max file size' >"
				+ "</div>"
				+ "<div class='col-md-6 margin-bottom-15'>"
				+ "<label>Memstore Flush Size</label>"
				+ "<input type='text' class='form-control' id='memstoreflushsize' name='memstoreflushsize' value='Please input memstore flush size' >"
				+ "</div>"
				+ "</div>"
				+ "<div class='row'>"
				+ "<div class='col-md-6 margin-bottom-15'>"
				+ "<label>Pre-built Region(The way one, choose one)</label>"
				+ "<input type='text' class='form-control' id='prebuiltone' name='prebuiltone' value='Please input, example : startRowKey,endRowKey,regionNumber' >"
				+ "</div>"
				+ "<div class='col-md-6 margin-bottom-15'>"
				+ "<label>Pre-built Region(The way two, choose one)</label>"
				+ "<input type='text' class='form-control' id='prebuilttwo' name='prebuilttwo' value='Please input, example : rowKey1,rowKey2,rowKey3...' >"
				+ "</div>"
				+ "</div>"
				+ "<div class='row'>"
				+ "<div class='col-md-6 margin-bottom-15'>"
				+ "<label>Is Read Only(Default false)</label>"
				+ "<select class='form-control margin-bottom-15' id='isreadonly' name='isreadonly'>"
				+ "<option value='Please select'>Please select</option>"
				+ "<option value='true'>true</option>"
				+ "<option value='false'>false</option>"
				+ "</select>"
				+ "</div>"
				+ "<div class='col-md-6 margin-bottom-15'>"
				+ "<label>Is Deferred Log Flush(Default false)</label>"
				+ "<select class='form-control margin-bottom-15' id='isdeferredlogflush' name='isdeferredlogflush'>"
				+ "<option value='Please select'>Please select</option>"
				+ "<option value='true'>true</option>"
				+ "<option value='false'>false</option>"
				+ "</select>"
				+ "</div>"
				+ "</div>"
				+ "<b>Famyily Attribute</b><br><br>"
				+ "<div class='row'>"
				+ "<div class='col-md-6 margin-bottom-15'>"
				+ "<label>Time To Live(Unit Millisecond)</label>"
				+ "<input type='text' class='form-control' id='timetolive' name='timetolive' value='Please input' >"
				+ "</div>"
				+ "<div class='col-md-6 margin-bottom-15'>"
				+ "<label>Bloom Type(Default Close)</label>"
				+ "<select class='form-control margin-bottom-15' id='bloomtype' name='bloomtype'>"
				+ "<option value='Please select'>Please select</option>"
				+ "<option value='ROW'>ROW</option>"
				+ "<option value='ROWCOL'>ROWCOL</option>"
				+ "</select>"
				+ "</div>"
				+ "</div>"
				+ "<div class='row'>"
				+ "<div class='col-md-6 margin-bottom-15'>"
				+ "<label>Compression</label>"
				+ "<select class='form-control margin-bottom-15' id='compression' name='compression'>"
				+ "<option value='Please select'>Please select</option>"
				+ "<option value='SNAPPY'>SNAPPY</option>"
				+ "<option value='LZO'>LZO</option>"
				+ "<option value='GZ'>GZ</option>"
				+ "<option value='LZ4'>LZ4</option>"
				+ "</select>"
				+ "</div>"
				+ "<div class='col-md-6 margin-bottom-15'>"
				+ "<label>Compaction Compression</label>"
				+ "<select class='form-control margin-bottom-15' id='compactioncompression' name='compactioncompression'>"
				+ "<option value='Please select'>Please select</option>"
				+ "<option value='SNAPPY'>SNAPPY</option>"
				+ "<option value='LZO'>LZO</option>"
				+ "<option value='GZ'>GZ</option>"
				+ "<option value='LZ4'>LZ4</option>"
				+ "</select>"
				+ "</div>"
				+ "</div>"
				+ "<div class='row'>"
				+ "<div class='col-md-6 margin-bottom-15'>"
				+ "<label>Max Versions(Default 3)</label>"
				+ "<input type='text' class='form-control' id='maxversions' name='maxversions' value='Please input' >"
				+ "</div>"
				+ "<div class='col-md-6 margin-bottom-15'>"
				+ "<label>In Memory(Default false)</label>"
				+ "<select class='form-control margin-bottom-15' id='inmemory' name='inmemory'>"
				+ "<option value='Please select'>Please select</option>"
				+ "<option value='true'>true</option>"
				+ "<option value='false'>false</option>"
				+ "</select>"
				+ "</div>"
				+ "</div>"
				+ "<div class='row'>"
				+ "<div class='col-md-6 margin-bottom-15'>"
				+ "<label>Block Size(Default 64K, Unit Byte)</label>"
				+ "<input type='text' class='form-control' id='blocksize' name='blocksize' value='Please input' >"
				+ "</div>"
				+ "<div class='col-md-6 margin-bottom-15'>"
				+ "<label>Is Block Cache Enabled(Default true)</label>"
				+ "<select class='form-control margin-bottom-15' id='isblockcacheenabled' name='isblockcacheenabled'>"
				+ "<option value='Please select'>Please select</option>"
				+ "<option value='true'>true</option>"
				+ "<option value='false'>false</option>"
				+ "</select>"
				+ "</div>"
				+ "</div>"
				+ "<div class='row templatemo-form-buttons'>"
				+ "<div class='col-md-12'>"
				+ "<button type='submit' class='btn btn-primary'>Create</button>&nbsp;&nbsp;&nbsp;&nbsp;"
				+ "<button type='reset' class='btn btn-default'>Reset</button>"
				+ "</div>" + "</div>" + "</form>";
		$("#hbase-center").html(html);
	}

	var winWidth = 0;
	var winHeight = 0;

	function findDimensions() {
		//获取窗口宽度
		/* if (window.innerWidth) {
			winWidth = window.innerWidth;
		} else if ((document.body) && (document.body.clientWidth)) {
			winWidth = document.body.clientWidth;
		} */
		//获取窗口高度
		if (window.innerHeight) {
			winHeight = window.innerHeight;
		} else if ((document.body) && (document.body.clientHeight)) {
			winHeight = document.body.clientHeight;
		}
		//通过深入Document内部对body进行检测获取窗口大小
		if (document.documentElement && document.documentElement.clientHeight
				&& document.documentElement.clientWidth) {
			winHeight = document.documentElement.clientHeight;
			//winWidth = document.documentElement.clientWidth;
		}
		winHeight = winHeight - 50 - 41 - 25;
		if (winHeight > 600) {
			$("#content").height(winHeight);
		}
	}
	window.onload = function() {
		findDimensions();
	};
</script>
</head>
<body>
	<div id="main-wrapper">
		<div class="navbar navbar-inverse" role="navigation">
			<div class="navbar-header">
				<div class="logo">
					<h1>HBase Management</h1>
				</div>
			</div>
		</div>
		<div class="template-page-wrapper">
			<div class="navbar-collapse collapse templatemo-sidebar">
				<ul class="templatemo-sidebar-menu">
					<li><a href="home.do"><i class="fa fa-home"></i>HBase</a></li>
					<li class="sub"><a href="javascript:;"> <i
							class="fa fa-database"></i>HBase Table&nbsp;&nbsp;<span
							class="caret"></span>
					</a>
						<ul class="templatemo-submenu">
							<li><a style="text-decoration: none; margin-left: 20px;"
								href="#" onclick="createtable()">Create Table</a></li>
							<li><a style="text-decoration: none; margin-left: 20px;"
								href="#" onclick="listtable()">List Table</a></li>
						</ul></li>
					<li class="sub active"><a href="forward.do?forward=query_data">
							<i class="fa fa-cubes"></i>Query Data
					</a></li>
					<li><a href="#" onclick="signout()"><i
							class="fa fa-sign-out"></i>Sign Out</a></li>
				</ul>
			</div>
			<div class="templatemo-content-wrapper">
				<div class="templatemo-content" id="content">
					<div class="row">
						<div class="col-md-12">
							<div id="hbase-center" class="table-responsive">
								<h4 class="margin-bottom-15">Query Table Data</h4>
								<form role='form' id='templatemo-preferences-form' method='post'
									action=''>
									<div class="row">
										<div class="col-md-6 margin-bottom-15">
											<label for="singleSelect">HBase Table</label>
											<select
												class="form-control margin-bottom-15" id="singleSelect">
												<option>table_snappy</option>
												<option>table_lzo</option>
											</select>
										</div>
										<div class="col-md-6 margin-bottom-15">
											<label for="firstName" class="control-label">Prefix RowKey</label>
											<input type="text" class="form-control" value="Please input prefix rowKey" id="prefixRowKey">
										</div>
									</div>
									<div class="row">
										<div class="col-md-6 margin-bottom-15">
											<label for="firstName" class="control-label">Start RowKey</label>
											<input type="text" class="form-control" value="Please input start rowKey" id="startRowKey">
										</div>
										<div class="col-md-6 margin-bottom-15">
											<label for="firstName" class="control-label">Stop RowKey</label>
											<input type="text" class="form-control" value="Please input stop rowKey" id="stopRowKey">
										</div>
									</div>
									<div class="row">
										<div class="col-md-6 margin-bottom-15">
											<label for="firstName" class="control-label">Max Versions(Default 3)</label>
											<input type="text" class="form-control" value="Please input max versions" id="maxVersions">
										</div>
										<div class="col-md-6 margin-bottom-15">
											<label for="firstName" class="control-label">Scan Cache Size</label>
											<input type="text" class="form-control" value="Please input scan cache size" id="scanCacheSize">
										</div>
									</div>
									<div class="row">
										<div class="col-md-12 margin-bottom-15">
											<label class="checkbox-inline"><input type="checkbox" value="" id="isCacheQueryResult">Is Cache Query Result</label>
											<label class="checkbox-inline"><input type="checkbox" value="" id="isGetOperation">Is Get Operation, If True Please Must Set Start RowKey</label>
										</div>
									</div>
									<div class="row">
										<div class="col-md-6 margin-bottom-15">
											<label for="firstName" class="control-label">Min
												Stamp</label> <input type="text" class="form-control" value="Please input min stamp" id="minStamp">
										</div>
										<div class="col-md-6 margin-bottom-15">
											<label for="firstName" class="control-label">Max
												Stamp</label> <input type="text" class="form-control" value="Please input max Stamp" id="maxStamp">
										</div>
									</div>
									<div class="row">
										<div class="col-md-6 margin-bottom-15">
											<label for="firstName" class="control-label">Time
												Stamp</label> <input type="text" class="form-control" value="Please input time stamp" id="timeStamp">
										</div>
										<div class="col-md-6 margin-bottom-15">
											<label for="firstName" class="control-label">Query
												Family</label> <input type="text" class="form-control" value="Please input query family, example : family1,family2" id="queryFamily">
										</div>
									</div>
									<div class="row">
										<div class="col-md-6 margin-bottom-15">
											<label for="firstName" class="control-label">Query
												Column</label> <input type="text" class="form-control" value="Please input query column, example : f1:c1,f2:c2" id="queryColumn">
										</div>
										<div class="col-md-6 margin-bottom-15">
											<label for="firstName" class="control-label">Max Rows</label>
											<input type="text" class="form-control" value="Please input max rows" id="maxRows">
										</div>
									</div>
									<div class='row templatemo-form-buttons'>
										<div class='col-md-12'>
											<button type='submit' class='btn btn-primary'>Query</button>
											&nbsp;&nbsp;&nbsp;&nbsp;
											<button type='reset' class='btn btn-default'>Reset</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog"
				aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">
								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
							</button>
							<h4 class="modal-title" id="myModalLabel">Are you sure?</h4>
						</div>
						<div class="modal-footer">
							<a id="btn-yes" href="#" class="btn btn-primary">Yes</a>
							<button type="button" class="btn btn-default"
								data-dismiss="modal">No</button>
						</div>
					</div>
				</div>
			</div>
			<footer class="templatemo-footer">
			<div class="templatemo-copyright">
				<p>
					&copy; 2014 Shanghai <a href="http://my.oschina.net/ysh3940/blog"
						target="_blank">YangShenhui</a>
				</p>
			</div>
			</footer>
		</div>
	</div>
</body>
</html>